{# @prop variant 'default'|'icon'|'image' The variant, default to `default` #}
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: 'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
    variants: {
        variant: {
            default: 'bg-transparent',
            icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
            image: 'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
        },
    },
    default_variant: {
        variant: 'default',
    },
) -%}

<div
    data-slot="item-media"
    data-variant="{{ variant }}"
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</div>
